<!-- 实际呈现效果的组件 -->
<template>
  <div class="com-container">
    <div class="title">
      <span>热销商品展示</span>
    </div>
    <div class="com-chart" ref="hot_ref"></div>
    <span class="iconfont arr-left" @click="toLeft">&#xe6ef;</span>
    <span class="iconfont arr-right" @click="toRight">&#xe6ed;</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myChart: null,
      allData: null,
      currentPage: 2,
      totalPage: 0,
      pageSize: 5,
      timerId: null,
      currentIndex: 0,
    };
  },
  computed: {
    catName() {
      if (!this.allData) {
        return "";
      } else {
        return this.allData[this.currentIndex].name;
      }
    },
  },
  created() {
    this.$socket.registerCallBack("hotData", this.getData);
  },

  mounted() {
    this.initChart();
    this.getData();

    // this.$socket.send({
    //   action: "getData",
    //   socketType: "hotData",
    //   chartName: "hotproduct",
    //   value: "",
    // });

    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    this.unregisterCallBack("hotproductData");
    window.removeEventListener("resize", this.screenAdapter);
  },

  methods: {
    //初始化echarts实例对象,要在dom结果加载完成后调用
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.hot_ref, "chalk");
      const initOption = {
        series: {
          type: "pie",
        },
      };
      this.myChart.setOption(initOption);
    },
    // 获取数据
    async getData() {
      // await this.$http.get()
      const { data: ret } = await this.$http.get("hotproduct");
      // console.log(ret);
      // 对allData进行赋值
      this.allData = ret;
      this.updateChart();
    },

    // 更新图表
    updateChart() {
      // 处理数据
      const seriesData = this.allData[this.currentIndex].children.map(
        (item) => {
          return {
            name: item.name,
            value: item.value,
            children: item.children,
          };
        }
      );
      const dataOption = {
        series: [
          {
            data: seriesData,
          },
        ],
        title: {
          text: this.allData[this.currentIndex].name,
          show: true,
          left: "80%",
          top: "90%",
        },

        tooltip: {
          show: true,
          trigger: "item",
          formatter: (params) => {
            // window.vc = this;
            // window.tt = params; //查看内容

            // children 在系列定义时候赋值进去
            const thirdCategory = params.data.children;

            let total = 0;
            thirdCategory.forEach((element) => {
              total += element.value;
            });

            let retStr = `total:${params.value} <br/>`;
            thirdCategory.forEach((item) => {
              retStr += `
              ${item.name}(${item.value}):${Math.floor(
                (item.value / total) * 100
              )}% \n
              <br/>
              `;
            });

            return retStr;
          },
        },
      };
      this.myChart.setOption(dataOption);
    },

    screenAdapter() {
      // console.log(this.$refs.seller_ref.offsetWidth);
      const titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize * 1.2,
          },
        },
        series: [
          {
            radius: titleFontSize * 4.5,
            center: ["50%", "50%"],
          },
        ],
      };

      this.myChart.setOption(adapterOption);

      // 收到调用resize才能产生效果
      this.myChart.resize();
    },

    toLeft() {
      this.currentIndex--;
      if (this.currentIndex < 0) {
        this.currentIndex = this.allData.length - 1;
      }
      this.updateChart();
    },
    toRight() {
      this.currentIndex++;
      if (this.currentIndex > this.allData.length - 1) {
        this.currentIndex = 0;
      }
      this.updateChart();
    },
  },
};
</script>
<style lang="less" scoped>
.arr-left {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 50px;
  color: white;
}

.arr-right {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 50px;
  color: white;
}

.title {
  position: absolute;
  left: 10%;
  top: 5%;
  z-index: 10;
  color: white;
  font-size: 1.2rem;
}
</style>
